
<template>
	<el-menu :default-active="activePath"  class="el-menu-vertical-demo" 
	background-color="#545c64" active-text-color="#ffd04b" 
	unique-opened text-color="#ffffff" @open="handleOpen" 
	@close="handleClose" :collapse="isCollapse">
	  <h3>{{title}}</h3>
	  <!-- 只有一级菜单栏 -->
	  <el-menu-item @click="clickMenu(item,item.path)" v-for="item in noChildren"  :index="item.path" :key="item.path">
	    <i :class="'el-icon-' + item.icon"></i>
	    <span slot="title">{{item.label}}</span>
	  </el-menu-item>
	  <!--有一.二级菜单栏 -->
	  <!-- 一级菜单 -->
	  <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
	    <template slot="title">
	      <i :class="'el-icon-' + item.icon"></i>
	      <span slot="title">{{item.label}}</span>
	    </template>
		<!-- 二级菜单 -->
	    <el-menu-item-group v-for="subItem in item.children" :key="subItem.path" >
	      <el-menu-item @click="clickMenu(subItem,subItem.path)" :index="subItem.path" >
			  <!-- 菜单栏图标 -->
			  <i :class="'el-icon-' + subItem.icon"></i>
			  {{subItem.label}}
			  </el-menu-item>
	    </el-menu-item-group>
	  </el-submenu> 
	</el-menu>
</template>
<style lang="less" scoped>
	.el-menu{
		height: 100%;
		border: none;
		h3{
			color: #FFFFFF;
			text-align: center;
			line-height: 48px;
		}
	}
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
	import { getMenuList } from '../../common/api/data.js'
  export default {
	  props:{
		title : String
	  },
    data() {
      return {
		activePath:'',
        // isCollapse: false,
		menu:[],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
	  clickMenu(item,activePath){ 
		  this.$router.push({
			  // name:item.name
			  path:item.path
		  }).catch(data => {})
		  // this.$store.commit('selectMenu',item)
		  // 保存连接的激活状态
		  window.sessionStorage.setItem('activePath',activePath)
		  this.activePath = activePath
	  },
	  
	  
    },
	created() {
		this.activePath = window.sessionStorage.getItem('activePath'),
		getMenuList().then((res) => {
			console.log(res,'菜单')
			if(res.code !== 0){
				return this.$message.error("获取菜单失败")
			}else{
				this.menu = res.data
			}
		})
	},

	computed:{
		// 没有子目录的情况
		noChildren(){
			return this.menu.filter(item=>{
				return (item.children.length == 0)
			}
			)
		},
		hasChildren(){
			return this.menu.filter(item=>{
				return (item.children.length > 0)
			}
			)
		},
		isCollapse(){
			return this.$store.state.tab.isCollapse
		}
	}
  }
</script>